import { Tabs } from "antd";
import { useEffect, useState } from "react";
import RecordList from "./components/RecordList";
import TableDesc from "./components/TableDesc";
import CreateTable from "./components/CreateTable";
import IndexList from "./components/IndexList";

export interface TableContentProps {
    curClientId: string;
    curDatabase: string;
    curTable: string;
}

function TableContent(props: TableContentProps) {

    const [activeKey, setActiveKey] = useState("");

    useEffect(() => {
        setActiveKey("recordList");
    }, [props.curClientId, props.curDatabase, props.curTable]);

    return (
        <Tabs type="card" activeKey={activeKey} onChange={key => setActiveKey(key)} style={{ height: "100vh", overflow: "hidden", backgroundColor: "white" }}>
            <Tabs.TabPane key="recordList" tab="数据">
                <div style={{ height: "calc(100vh - 60px)", paddingRight: "20px", paddingLeft: "20px", overflow: "auto" }}>
                    {activeKey == "recordList" && (
                        <RecordList curClientId={props.curClientId} curDatabase={props.curDatabase} curTable={props.curTable} />
                    )}
                </div>
            </Tabs.TabPane>
            <Tabs.TabPane key="tableDesc" tab="表结构">
                <div style={{ height: "calc(100vh - 60px)", paddingRight: "20px", paddingLeft: "20px", overflow: "auto" }}>
                    {activeKey == "tableDesc" && (
                        <TableDesc curClientId={props.curClientId} curDatabase={props.curDatabase} curTable={props.curTable} />
                    )}
                </div>
            </Tabs.TabPane>
            <Tabs.TabPane key="createTable" tab="建表语句">
                <div style={{ height: "calc(100vh - 60px)", paddingRight: "20px", paddingLeft: "20px", overflow: "auto" }}>
                    {activeKey == "createTable" && (
                        <CreateTable curClientId={props.curClientId} curDatabase={props.curDatabase} curTable={props.curTable} />
                    )}
                </div>
            </Tabs.TabPane>
            <Tabs.TabPane key="indexList" tab="索引">
                <div style={{ height: "calc(100vh - 60px)", paddingRight: "20px", paddingLeft: "20px", overflow: "auto" }}>
                    {activeKey == "indexList" && (
                        <IndexList curClientId={props.curClientId} curDatabase={props.curDatabase} curTable={props.curTable} />
                    )}
                </div>
            </Tabs.TabPane>
        </Tabs>
    );
}

export default TableContent;